<template>
  <div class="elevanceViewscontent">
    <!-- 自定义数据集关联关系查询 -->
    <el-table
        :data="ListArow"
        :span-method="objectSpanMethod"
        class="tableArea"
        height="calc(100% - 40px)">
        <!-- style="width: 100%;height: calc(100% - 2px);overfow:scroll" -->
        <el-table-column
          prop="masterTableName"
          label="原表名称"
          align="center"
          width="100"/>
          <el-table-column
          prop="slaveTableName"
          label="关联表名称"
          align="center"
          width="100"/>
        <el-table-column
          prop="masterShowfld"
          label="原表字段"/>
        <!-- <el-table-column
          prop="masterShowfld"
          label="原表字段类型"/> -->
        <el-table-column
          prop="relationModeLabel"
          label="关联类型"/>
        <el-table-column
          prop="slaveShowfld"
          label="关联表字段名称"/>
          <!-- <el-table-column
          prop="slaveShowfld"
          label="关联表字段类型"/> -->
          
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" content="修改" placement="top-start">
              <i class="el-icon-edit-outline" @click="modify(scope.$index, scope.row)" />
             </el-tooltip>
             <el-tooltip class="item" content="删除" placement="top-start">
              <i class="el-icon-delete" @click="deleteData(scope.$index, scope.row)" />
             </el-tooltip>
          </template>
        </el-table-column >
      </el-table>
  </div>
</template>
<script>
import {ADDMERGE,QUERYELEVIEW} from '@api/url'
export default {
  data(){
    return{
      spanArr:[],
      eleviewsData:[],
      pos:null,
      ListArow:[],
      slaveId:""
    }
  },
  props:{
    showeleviewsData:{
      type:Object,
      default:null
    },
    menuData:{
      type:Object,
      default:null
    }
  },
  computed:{
  // 新增自助数据集信息
    addelevanceObj(){
      debugger
      return this.$storeSave.state.addelevanceObj
    }
  },
  watch:{
    showeleviewsData(val){
      this.queryElevanceViews(val)
    }
  },
  mounted() {
    //如果不是新增数据集合，就不勇查询
    if (this.$storeSave.state.updateObj.menuId || this.$storeSave.state.addelevanceObj.menuId) {
      this.queryElevanceViews()
    }
  },
  methods:{
    rowspan() {
      console.log(this.ListArow)
  		this.ListArow.forEach((item,index) => {
	    	if( index === 0){
	    		this.spanArr.push(1);
	    		this.position = 0;
	    	}else{
	    		if(	item.relationId == 	this.ListArow[index-1].relationId){
	    			this.spanArr[this.position] += 1;
	    			this.spanArr.push(0);
	    		}else{
	    			this.spanArr.push(1);
	    			this.position = index;
	    		}
	    	}
	    })
  	},
    queryElevanceViews(data){
      this.$storeSave.state.activeTable=[]
      let queryId=""
      if (data) {//关联成功查询
      console.log('关联成功查询')
        queryId= data.modelId
      }else{
        //点击编辑进来的时候查询
        console.log('点击编辑进来的时候查询')
        queryId=this.$storeSave.state.updateObj.menuId ? this.$storeSave.state.updateObj.menuId : this.$storeSave.state.addelevanceObj.menuId
      }
      console.log(this.menuData.menuId,'this.menuData.menuId')
      console.log(this.addelevanceObj,'this.addelevanceObj')
      let param={
        //关联成功后表id 
        modelId:queryId
      }
      if (queryId) {
        debugger
        this.$http.post(QUERYELEVIEW,param).then(res=>{
          debugger
          console.log('查询关联视图信息成功')
          console.log(res)
          this.ListArow=[]
          let val=res.data.data;
          debugger
          if (res.data.code=='200' && res.data.data.length>0) {
            //1、将主表附表id收集起来，在可选表上显示可选字段
            let newArray=[];
            //2、给每条数据赋值
              res.data.data.forEach((item,index)=>{
                if (index==0) {
                  newArray.push(item.masterId)
                }else{
                  let have=newArray.indexOf(item.masterId)
                  if (have==-1) {
                    newArray.push(item.masterId)
                  }
                }
                item.lists.forEach(ele=>{
                ele.relationId=item.relationId;
                ele.modelId=item.modelId;
                ele.slaveId=item.slaveId;
                ele.relationMode=item.relationMode;
                ele.relationModeLabel=this.getLabel(item.relationMode)
                ele.slaveTableName=item.slaveTableName;
                ele.masterTableName=item.masterTableName
                ele.masterId=item.masterId
                this.ListArow.push(ele)
                  let have=newArray.indexOf(ele.slaveId)
                  if (have==-1) {
                    newArray.push(ele.slaveId)
                  }
              })
            })
            console.log('______________++++++++++++++++++++已选表有哪些')
            console.log(newArray)
            // this.activeTable=
            this.$storeSave.state.activeTable=newArray;

            this.slaveId=val.slaveId//连接表id
            this.$storeSave.state.mainTableData.menuId=this.ListArow[0].masterId//点关联按钮时给主表信息查询赋值，
            this.$storeSave.state.mainTableData.name=this.ListArow[0].masterTableName//主表名称
            this.rowspan(val)
          }else{
            this.$alert("无关联信息", '提示', {
              confirmButtonText: '确定',
              type: 'warning',
            })
            debugger
            this.ListArow=[]
          }
        }).catch(err=>{
          debugger
          console.log('查询关联视图信息失败')
          console.log(err)
          this.$alert(err.data.data, '提示', {
            confirmButtonText: '确定',
            type: 'warning',
          })
        })
      }else{
        this.$alert('当前id为空，请选择要查询的数据', '提示', {
          confirmButtonText: '确定',
          type: 'warning',
        })
      }
      
    },
    getLabel(relationType){
          let arr=[{value:2,label:"左连接"},{value:3,label:"右连接"}]
          let label=""
          arr.forEach(ele=>{
            if (relationType==ele.value) {
              label=ele.label
            }
          })
         return label
        },
    //修改
    modify(index,data){
      let slaveId=data.slaveId
      let uadateDateData=[]
      this.ListArow.forEach((ele,index)=>{
        if (ele.slaveId==slaveId && data.relationId==ele.relationId) {
          uadateDateData.push(ele)
        }
      })
      this.$emit('tagisShowpup',uadateDateData,{modelId:this.showeleviewsData.menuId,slaveId:this.slaveId})
    },
    //删除
    deleteData(index,data){
      console.log(data)
      console.log(index)
      debugger
      console.log('==============')
      let param={
         optMode:"D",
          relationId:data.relationId, //关联id
          modelId:data.modelId, //模型id 写死
          slaveId:data.slaveFld  //从表id
      }
      console.log(param)
      console.log('删除入参')
      this.$http.post(ADDMERGE,param).then(res=>{
        console.log(res)
        if (res.data.code=="200") {
          this.queryElevanceViews()//重新查询关联视图
          this.$confirm('删除成功', '提示', {
            confirmButtonText: '确定',
            type: 'success'
          })
          //显示预览
          // this.closePup()
        }else{
          this.$confirm(res.data.message, '提示', {
            confirmButtonText: '确定',
            type: 'fail'
          })
        }
      }).catch(err=>{
        console.log(err)
        this.$confirm('删除失败', '提示', {
            confirmButtonText: '确定',
            type: 'fail'
          })
      })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {  //表格合并行
    	if (columnIndex === 0) {
    		const _row = this.spanArr[rowIndex];
    		const _col = _row>0 ? 1 : 0;
    		return {
    			rowspan: _row,
    			colspan: 1
    		}
    	}
      if (columnIndex === 1) {
    		const _row = this.spanArr[rowIndex];
    		const _col = _row>0 ? 1 : 0;
    		return {
    			rowspan: _row,
    			colspan: 1
    		}
    	}
    	if(columnIndex === 5){
    		const _row = this.spanArr[rowIndex];
    		const _col = _row>0 ? 1 : 0;
    		return {
    			rowspan: _row,
    			colspan: 1
    		}
    	}
    },
    
  }
}
</script>
<style lang="less" scoped>
  .elevanceViewscontent{
    margin-top:10px ;
    height: calc(100% - 2px);
 
  }
</style>